@mixin reading-text($color: #606266) {
  font-size: $s12;
  font-weight: $font-weight-normal;
  line-height: 14px;
  color: $color;
}

// 清除默认内外边距
* {
  padding: 0;
  margin: 0;
  font-size: 12px;
}

// 清除ui，li默认样式
ul,
li {
  list-style: none;
}

/* 文字对齐方式 start */
// 左对齐
.text-left {
  text-align: left;
}

// 居中
.text-center {
  text-align: center;

  .ui-button+.ui-button {
    margin-left: 30px;
  }
}

// 右对齐
.text-right {
  text-align: right;
}

/* 文字对齐方式 end */
/* 小手样式*/
.cursor-pointer {
  cursor: pointer;
}

/* 小手样式end*/

/* 侧边栏样式*/
// .ui-menu-item:focus,
// .ui-menu-item:hover,
// .ui-submenu__title:hover {
//   @include menuBg(pc);

// }

// .ui-menu .is-active {
//   @include menuBg(pc);
// }

/* 侧边栏样式end*/
/* 查询表单样式 start */
.query-form {
  clear: both;
  display: table;
  width: 100%;

  .ui-form-item {
    margin-bottom: 20px;
    width: 370px;
    float: left;

    .ui-input__inner {
      width: 100%;
      height: 100%;
    }

    .ui-form-item__label {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
    }

    @extend .default-input;

    // 账号类型、流水号切换
    .query-form_select {
      width: 300px;

      .ui-input-group__prepend {
        border-right: none;

        .ui-select {
          width: 105px;

          .ui-input {
            width: 100%;
          }
        }
      }
    }

    .ui-date-editor,
    .ui-date-editor * {
      vertical-align: top;
    }
  }
}

/* 查询表单样式 end */
/* 默认输入框样式 start */
.default-input {

  .ui-date-editor,
  .ui-input,
  .ui-input-group,
  .ui-select {
    width: 250px;
    height: 40px;
  }
}

/* 鼠标划过指针变手形 start */
.cursor-pointer {
  cursor: pointer;
}

/* 账户异常色值 */
.ac-no-abnormal {
  color: #ef4538;
}

// 账户异常的样式  添加新的账户 按钮
.add-new-acconut {
  text-align: center;
  border: 1px dashed #b2b7c0;
  border-radius: 4px;
  line-height: 30px;
}

.ui-select-dropdown__item.hover {
  .add-new-acconut {
    color: #158aff;
    border-color: #158aff;
  }
}

// 鼠标划过指针变手形 end */

/* ul初始化样式 start */
ul {
  @extend .mg-0;
  @extend .pd-0;

  li {
    @extend .mg-0;
    list-style: none;
  }
}

/* ul初始化样式 end */

/* 图片加载失败样式 start */
img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}

img.error::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5 url(~@/assets/image/common/load-failed.svg) no-repeat center / 50% 50%;
}

img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 1.5;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 图片加载失败样式 end */

/* 阅读并勾选 start */
.reading {
  div:first-child {
    line-height: 0;
  }

  .ui-link {
    vertical-align: top;
  }

  .ui-link--inner,
  a {
    @include reading-text(#138aff);
  }

  .ui-checkbox__inner,
  .ui-radio__inner {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }

  span {
    @include reading-text;
  }

  .ui-checkbox .ui-checkbox__input.is-checked .ui-checkbox__inner::after {
    left: 4.5px;
    top: 1px;
  }
}

/* 阅读并勾选 end */

/* 时间选择器中默认今天的样式修改 start */
.ui-picker-panel {
  .today {
    span {
      font-weight: 700;
      border: 1px solid #e3e3e3;
      background: #e3e3e3;
    }
  }
}

/* 时间选择器中默认今天的样式修改 end */

/* input textarea button 焦点样式 start */
input:focus,
textarea:focus,
button:focus {
  outline: none;
}

// input textarea button 焦点样式 end */

// ie浏览器输入框样式
input::-ms-clear,
::-ms-reveal {
  display: none;
}

/* 突出显示颜色 start */
.text-importent {
  color: #ef4134;
}

.text-importent2 {
  color: #ec1b30;
}

.text-importent3 {
  color: #f76445;
}

.text-blue {
  color: #3164e8;
}

.text-menu-color {
  color: $color-primary;
}

/* 突出显示颜色 end */

/* 原生table需要居中的元素统一用的class start */
.detail-info-table {
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    font-size: $s14;
    font-weight: $font-weight-medium;
    text-align: left;
    color: $color-text-primary;
    line-height: 18px;
    padding: 0 14px;
    height: 48px;
    border: 1px solid $color-border-3;
    word-break: break-all;
  }

  /* 表格中的标题部分 */
  .detail-info-table-title {
    background: #f7f7f7;
    background-clip: padding-box;
    text-align: center;
    color: $color-text-secondary;
    width: 15%;
    font-weight: $font-weight-normal;
  }

  .detail-info-table-content {
    width: 35%;

    .ui-form-item__label {
      font-weight: 200;
    }
  }

  .text-importent {
    color: #ef4134;
  }

  .ui-form-item__content {
    margin-bottom: 5px;
  }
}

/* 原生table需要居中的元素统一用的class end */

/* 表格居中样式 start */
.center {

  thead,
  tr {

    th,
    td {
      text-align: center;
    }
  }
}

/* 表格居中样式 end */

/* p标签初始化margin padding */
p {
  @extend .mg-0;
  @extend .pd-0;
}

/* main-area下input输入框placeholder颜色 */
.main-area {

  input::-webkit-input-placeholder,
  input::-moz-input-placeholder,
  input::-ms-input-placeholder {
    color: #d9d9d9;
  }
}

/* 文字对齐方式 start */
// 左对齐
.text-left {
  text-align: left;
}

// 居中
.text-center {
  text-align: center;

  .ui-button+.ui-button {
    margin-left: 30px;
  }
}

// 右对齐
.text-right {
  text-align: right;
}

/* 文字对齐方式 end */

/* 边距 start */
.pd-0 {
  padding: 0;
}

.pd-10 {
  padding: 10px;
}

.pd-lr-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.pd-bt-10 {
  margin-bottom: 10px;
}

.pd-bt-30 {
  margin-bottom: 30px;
}

.mg-0 {
  margin: 0;
}

.mg-lt-8 {
  margin-left: 8px;
}

.mg-lt-10 {
  margin-left: 10px;
}

.mg-lt-20 {
  margin-left: 20px;
}

.mg-lt-35 {
  margin-left: 35px;
}

.mg-lt-40 {
  margin-left: 40px;
}

.mg-lt-60 {
  margin-left: 60px;
}

.mg-bt-10 {
  margin-bottom: 10px;
}

.mg-bt-15 {
  margin-bottom: 15px;
}

.mg-bt-20 {
  margin-bottom: 20px;
}

.mg-bt-30 {
  margin-bottom: 30px;
}

.mg-bt-40 {
  margin-bottom: 40px;
}

.mg-bt-70 {
  margin-bottom: 70px;
}

.mg-bt-80 {
  margin-bottom: 80px;
}

.mg-bt-150 {
  margin-bottom: 150px;
}

.mg-bt-300 {
  margin-bottom: 300px;
}

.mg-bt-400 {
  margin-bottom: 400px;
}

.mg-top-0 {
  margin-top: 0;
}

.mg-top-5 {
  margin-top: 5px;
}

.mg-top-10 {
  margin-top: 10px;
}

.mg-top-15 {
  margin-top: 15px;
}

.mg-top-18 {
  margin-top: 18px;
}

.mg-top-20 {
  margin-top: 20px;
}

.mg-top-30 {
  margin-top: 30px;
}

.mg-top-40 {
  margin-top: 40px;
}

.mg-top-50 {
  margin-top: 50px;
}

.mg-rt-20 {
  margin-right: 20px;
}

.mg-rt-10 {
  margin-right: 10px;
}

/* 边距 end */

// 刷新按钮
.refresh {
  color: $color-text-hover;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.search {
  @extend .cursor-pointer;
  vertical-align: sub;

  img {
    height: 20px;
    width: 20px;
  }
}

/* 字体过多，显示省略号 start */
.text-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 字体过多，显示省略号 end */

/* 弹框取消按钮 */
.ui-dialog__headerbtn .ui-dialog__close {
  font-size: $s20;
}

/* 弹框取消按钮 end */

/* 主要内容区域带有tabs的标题 start */
.header-tabs-title {
  font-size: $s20;
  color: $color-text-primary;
  letter-spacing: 0;
  margin-bottom: -38px;
  line-height: 38px;
  display: block;
}

/* 主要内容区域带有tabs的标题 end */

/*  主要内容区域的标题 start */
.header-title {
  font-size: $s20;
  color: $color-text-primary;
  letter-spacing: 0;
  line-height: 38px;
  display: block;
  margin-bottom: 20px;
}

/*  主要内容区域的标题 end */

/* 清浮动 start */
.clear-fix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
}

/* 清浮动 end */
/* 录入页form表单 start */
.vx-form {

  // 开户银行 小图标
  .vx-form_search {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-top: 5px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .theme-title {
    margin-top: 0;
  }

  label.ui-form-item__label {
    margin-left: -85px;
    font-weight: 200;
  }

  // 单笔转账付款金额手续费
  .form-openMobilephone {
    line-height: 26px;

    p {
      width: 100%;
    }

    .formality-class {
      color: #606266;
      font-size: $s12;

      .iconPosition {
        margin-top: 12px;
        color: $color-text-hover;
      }
    }
  }

  .ui-radio__label {
    padding-left: 8px;
    color: #606266;
  }

  .ui-input__icon {
    height: 32px;
    line-height: 32px;
  }

  .ui-form-item__label {
    line-height: 40px;
    text-align: right;
    padding: 0 20px 0 0;
    font-size: $s16;
  }

  .ui-input__inner {
    line-height: 40px;
    // border-radius: 2px !important;
    border: solid 1px $color-border-1;
  }

  .ui-form-item__label,
  .ui-form-item__content {
    color: $color-text-primary;
    display: inline-block;
    float: none;
    vertical-align: middle;
  }

  .ui-form-item__content {
    line-height: 40px;
    vertical-align: top;
    text-align: left;
    font-size: $s14;
    height: auto !important;
    margin-left: 0 !important;
  }

  text-align: center;

  .ui-input {
    .ui-select__caret {
      color: #a9a8ae;
    }
  }

  .ui-input__inner,
  .ui-form-item__content {
    width: 300px;
    height: 40px;
    border-color: rgba(217, 217, 217, 1);
    color: $color-text-primary;

    .ui-range-editor {
      width: 100%;
    }

    .default-btn {
      width: 120px;
    }

    .ui-button+.ui-button {
      margin-left: 30px;
    }
  }

  .ui-select {
    .ui-input {
      .ui-select__caret {
        color: #a9a8ae;
      }
    }

    .ui-input__inner {
      width: 300px;
      height: 40px;
      border-color: rgba(217, 217, 217, 1);
      color: $color-text-primary;
    }
  }
}

/* 录入页form表单 end*/

/* 标题栏 start */
.theme-title {
  position: relative;
  padding-left: 10px;
  font-size: $s14;
  font-weight: 900;
  margin: 20px 0;
}

.theme-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 18px;
  margin-top: -8px;
  border-radius: 3px;
  background: $color-primary;
}

/* 标题栏 end */

body {
  background: #fff;
}
